<template>
  <div>
    <template v-if="info.label_id">
      <refresh ref="refresh" :upPullEvent="queryList" :upPullEnable="upPullEnable" :bottom="bottom">
        <div class="list-inner">
          <!-- table遮罩 -->
          <div class="table-loading" v-if="loadingLock"></div>
          <div class="topPlaceHolder"></div>
          <div class="live-list" v-if="dataList.length">
            <row v-for="(item, index) in dataList" :info="item" :key="index"></row>
          </div>
          <div v-if="noData" class="empty">该分类暂无推荐视频！</div>
        </div>
      </refresh>
    </template>
    <!-- 未购买状态 -->
    <div v-else class="skeleton">
      <div class="skeletonHead"></div>
      <div class="buy-lock" @click="goPay">
        <div class="icon-lock mr-8"></div>
        <div>{{ `立即解锁${info.label_name}体系` }}</div>
      </div>
      <img src="../../assets/images/live-skeleton.png" alt="" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import query from '@/lib/query.js';
import refresh from '@/components/common/UpLoadRefresh.vue';
import row from '@/components/live/LiveRow.vue';
import upPullMixin from '@/lib/upPullMixin.js';
export default {
  name: 'ListPage',
  mixins: [upPullMixin],
  components: {
    refresh,
    row,
  },
  data() {
    return {
      pageLoadMsg: {},
      dataList: [],
      loadingLock: true,
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {},
  created() {
    if (this.info.label_id) {
      // 无label_id视为走无权限情况
      this.queryList();
    }
  },
  methods: {
    // 加载更多的逻辑
    queryList() {
      if (this.lock) {
        return;
      }
      this.lock = true;
      this.setPageStatus();
      const param = {
        ...this.pageLoadMsg,
      };
      query
        .getLivePage(param)
        .then(res => {
          this.lock = false;
          this.formatPagingData(res.data);
          this.loadingLock = false;
        })
        .catch(err => {
          this.lock = false;
          this.mixinErrHandler(err, this.reload);
        });
    },
    // 分页处理
    setPageStatus() {
      if (this.pageLoadMsg.page_num) {
        this.pageLoadMsg.page_num++;
      } else {
        this.pageLoadMsg = {
          page_num: 1,
          page_size: 10,
          label_id: this.info.label_id,
        };
      }
    },
    goPay() {
      // 跳转常规支付
      const url = `${_Global.url.payIndex}?sid=${this.info.sid}`;
      window.location.href = url;
    },
  },
};
</script>
<style lang="less" scoped>
.skeleton {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
  }
}
.live-list {
  padding: 0 0.32rem 0.48rem;
  .live-row {
    margin-top: 0.32rem;
    &:first-child {
      margin-top: 0;
    }
  }
}
.list-inner {
  background-color: #ffffff;
}
</style>
